<template>
  <div class="shop">
    <div class="box">
      <h3>商品信息查询</h3>
      <div class="search">
        <input
          type="text"
          class="search_input"
          placeholder="搜索商品"
          v-model="keyword"
          ref="SSS"
          @keydown.enter="handleSearch"
        />
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </el-form-item>
      </div>
      <table border="1" width="%" bordercolor="#cfcfcf">
        <thead>
          <tr>
            <th>名称</th>
            <th>价格</th>
          </tr>
        </thead>
        <tr v-for="(item, index) in Data" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td
            class="add"
            @click="handleShow(item, $event)"
            :class="{ active: index == showIndex }"
          >
            {{ show }}
          </td>
        </tr>
        <tbody></tbody>
      </table>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { onMounted, ref, defineComponent, computed } from 'vue'
import { useStore } from 'vuex'

export default defineComponent({
  setup() {
    onMounted(() => {
      le()
    })
    let store = useStore()

    const data = ref([
      {
        name: '蓝罐曲奇',
        price: 120,
      },
      // {
      //   name: '双杯红酒',
      //   price: 100,
      // },
      {
        name: '牛栏1',
        price: 150,
      },
      {
        name: '牛栏2',
        price: 150,
      },
      {
        name: '牛栏3',
        price: 140,
      },
      {
        name: '牛栏4',
        price: 140,
      },
      {
        name: '大雀巢',
        price: 220,
      },
      {
        name: '小雀巢',
        price: 110,
      },
      {
        name: '大安怡',
        price: 180,
      },
      {
        name: '小安怡',
        price: 110,
      },
      {
        name: '麦片-罐装',
        price: 45,
      },
      {
        name: '麦片-包',
        price: 30,
      },
      {
        name: '淮山饼干',
        price: 15,
      },
      {
        name: '高钙饼干',
        price: 15,
      },
      {
        name: '花旗参味糖',
        price: 35,
      },
      {
        name: '水果果冻',
        price: 15,
      },
      {
        name: '芒果味果冻',
        price: 13,
      },
      {
        name: '栗蓉饼干',
        price: 15,
      },
      {
        name: '利是糖原味',
        price: 38,
      },
      {
        name: '利是糖薄荷味',
        price: 32,
      },
      {
        name: '子母奶小',
        price: 8,
      },
      {
        name: '子母奶大',
        price: 10,
      },
      {
        name: '子母奶加大-6罐',
        price: 26,
      },
      {
        name: '子母奶罐装英文',
        price: 85,
      },
      {
        name: '子母奶罐装中文',
        price: 95,
      },
      {
        name: '子母奶大罐',
        price: 180,
      },
      {
        name: '美素1',
        price: 240,
      },
      {
        name: '美素2',
        price: 210,
      },
      // {
      //   name: '皇家美素2',
      //   price: 320,
      // },
      {
        name: '美素3',
        price: 200,
      },
      {
        name: '美素4',
        price: 170,
      },
      {
        name: '怡保康',
        price: 230,
      },
      {
        name: '金装加营素',
        price: 205,
      },
      {
        name: '爱他美金装',
        price: 220,
      },
      {
        name: '菊花晶',
        price: 45,
      },
      {
        name: '米糊',
        price: 35,
      },
      // {
      //   name: '惠氏1',
      //   price: '打电话',
      // },
      // {
      //   name: '惠氏2',
      //   price: '打电话',
      // },
      {
        name: '安满',
        price: 165,
      },
      {
        name: 'A+1',
        price: 215,
      },
      {
        name: 'A+2',
        price: 185,
      },
      {
        name: 'A+3',
        price: 165,
      },
      {
        name: 'A+4',
        price: 160,
      },
      {
        name: '葡萄零',
        price: 35,
      },
      {
        name: '金莎巧克力',
        price: 85,
        liang: '24粒',
      },
      {
        name: '金莎巧克力',
        price: 85,
        liang: '30粒',
      },
      {
        name: '建达巧克力大',
        price: 14,
      },
      {
        name: '建达巧克力小',
        price: 7,
      },
      {
        name: '建达奇趣蛋',
        price: 7,
      },
      {
        name: '缤纷巧克力',
        price: 20,
      },
      // {
      //   name: 'Mm豆',
      //   price: 12,
      // },
      // {
      //   name: '芒果软糖100%',
      //   price: 60,
      // },
      // {
      //   name: '不二家巧克力',
      //   price: 10,
      // },
      {
        name: 'Xx-5 ',
        price: 4.5,
      },
      {
        name: '小馒头',
        price: 13,
      },
      {
        name: '五谷豆-555',
        price: 15,
      },
      // {
      //   name: '奶片',
      //   price: 15,
      // },
      // {
      //   name: '金谷亭千层葡萄面包',
      //   price: 15,
      // },
      // {
      //   name: '金谷亭千层红豆面包',
      //   price: 15,
      // },
      {
        name: '金津陈皮丹',
        price: 5,
      },
      // {
      //   name: '蠔油-小',
      //   price: 5,
      // },
      {
        name: '李锦记蠔油-大',
        price: 18,
      },
      {
        name: '李锦记生抽酱油',
        price: 15,
      },
      {
        name: '李锦记叉烧酱',
        price: 18,
      },
      {
        name: '鲍鱼汁',
        price: 35,
      },
      {
        name: '合味道杯面香辣',
        price: 7.5,
      },
      {
        name: '梅粉',
        price: 15,
      },
      {
        name: '鸡精',
        price: 20,
      },
      // {
      //   name: '新苗向日葵',
      //   price: 13,
      // },
      {
        name: '出前一丁五包',
        price: 20,
      },
      {
        name: '出前一丁一小包',
        price: 4,
      },
      // {
      //   name: '棒棒糖-散装',
      //   price: 2,
      // },
      {
        name: '果超软糖',
        price: 15,
      },
      {
        name: '金洋夹心山楂片',
        price: 15,
      },
      {
        name: '串烧糖串串',
        price: 22,
      },
      {
        name: '黑糖话梅',
        price: 15,
      },
      {
        name: '维他一件',
        price: 65,
      },
      {
        name: '维他一排6只',
        price: 18,
      },
      {
        name: '维他一只罐',
        price: 3,
      },
      {
        name: '黑人牙膏套装',
        price: 32,
      },
      {
        name: '黑人牙膏亮白',
        price: 25,
      },
      {
        name: '黑人牙膏',
        price: 15,
      },
      {
        name: '舒适达牙膏',
        price: 28,
      },
      {
        name: '狮王洁白牙膏',
        price: 15,
      },
      {
        name: '狮王牙膏去烟垢',
        price: 18,
      },
      // {
      //   name: '狮王咸味牙膏',
      //   price: 13,
      // },
      {
        name: '高露洁牙膏原味',
        price: 15,
      },
      {
        name: '高露洁牙膏二大一小',
        price: 28,
      },
      {
        name: '高露洁牙膏冰',
        price: 15,
      },
      {
        name: '高露洁白牙膏',
        price: 15,
      },
      {
        name: '高露洁绿蓝牙膏',
        price: 13,
      },
      {
        name: '云南白药牙膏-大',
        price: 28,
      },
      {
        name: '云南白药牙膏-小',
        price: 24,
      },
      {
        name: '宝贝兔小牙膏',
        price: 8,
      },
      {
        name: '双黄连牙膏',
        price: 12,
      },
      {
        name: '日本美源染发-自然色',
        price: 55,
      },
      {
        name: '美源染发',
        price: 55,
      },
      {
        name: '欧莱雅染发',
        price: 65,
      },
      // {
      //   name: '蛇标-辣椒膏药贴布(一贴)',
      //   price: 13,
      // },
      {
        name: '凡士林大',
        price: 28,
      },
      {
        name: '凡士林小',
        price: 18,
      },
      {
        name: '电热蚊香液',
        price: 5,
      },
      {
        name: '香水高',
        // "price":
      },
      {
        name: '香水低',
        // "price":
      },
      {
        name: '世界初',
        // "price":
      },
      {
        name: '曼秀雷敦草本控油洁面乳',
        price: 75,
      },

      {
        name: '浪漫身体护肤乳',
        price: 32,
      },
      {
        name: '草本泡沫洁面膏',
        price: 30,
      },

      {
        name: '大宝-大',
        price: 18,
      },
      {
        name: '小宝',
        price: 10,
      },
      {
        name: '梨牌护手霜',
        price: 18,
      },
      {
        name: '梨牌身体乳-大',
        price: 28,
      },
      {
        name: '梨牌身体乳-小',
        price: 18,
      },
      {
        name: '强生清爽润肤油-500g-白',
        price: 38,
      },
      {
        name: '强生清爽润肤油-小',
        price: 20,
      },
      // {
      //   name: '妈妈婴儿保湿修复手霜',
      //   price:
      // },
      {
        name: '杏林甘油',
        price: 28,
      },
      {
        name: '西班牙橄榄油',
        price: 28,
      },
      {
        name: '日本叮叮蚊怕水',
        price: 28,
      },
      {
        name: '沙宣特强定型水（特硬)',
        price: 48,
      },
      {
        name: '喷型止汗露',
        price: 38,
      },
      {
        name: '走珠止汗露',
        price: 25,
      },
      {
        name: '狮王牙刷',
        price: 11,
      },
      {
        name: '金-牙刷',
        price: 8,
      },
      {
        name: '儿童牙刷带玩具',
        price: 8,
      },
      {
        name: '青蛙牙刷套装4支装',
        price: 10,
      },
      // {
      //   name: '韩国4只装',
      //   price: '25',
      // },
      {
        name: '话梅王',
        price: 30,
      },
      {
        name: '好丽友',
        price: 25,
      },
      {
        name: 'RIR卡夫咸芝士饼干',
        price: 45,
      },
      {
        name: '什锦梅',
        price: 18,
      },
      {
        name: '艾诗沐浴露2瓶',
        price: 65,
      },
      {
        name: '素肌碧柔',
        price: 48,
      },
      {
        name: '多芬沐浴露',
        price: 48,
      },
      {
        name: '艾诗沐浴露单瓶',
        price: 35,
      },
      {
        name: '罗曼诺',
        price: 50,
      },
      {
        name: '厉士',
        price: 45,
      },
      {
        name: '舒肤佳沐浴露',
        price: 30,
      },
      {
        name: '舒肤佳洗手液',
        price: 20,
      },
      {
        name: '沙宣',
        price: 68,
      },
      {
        name: '罗曼诺男士洗发',
        price: 55,
      },
      {
        name: '艾诗洗发露',
        price: 50,
      },
      {
        name: '清扬',
        price: 50,
      },
      {
        name: '多芬洗发露',
        price: 45,
      },
      {
        name: '日本多芬洗发露',
        price: 55,
      },
      {
        name: '卡露尔',
        price: 45,
      },
      {
        name: '霸王洗发露',
        price: 50,
      },
      {
        name: '花王洗发露',
        price: 40,
      },
      {
        name: '吕洗发露',
        price: 45,
      },
      {
        name: '黑-吕洗发露',
        price: 55,
      },
      {
        name: '飘柔小-400ml',
        price: 32,
      },
      {
        name: '飘柔大-700ml',
        price: 48,
      },
      {
        name: '阿道夫洗发露-800g',
        price: 50,
      },
      {
        name: '阿道夫洗发露-750g',
        price: 50,
      },
      {
        name: '阿道夫洗发露-500g',
        price: 40,
      },
      {
        name: '姜小瓶-400ml',
        price: 90,
      },
      {
        name: '琴叶生姜',
        price: 38,
      },
      {
        name: '棕榄',
        price: 38,
      },
      {
        name: '男士海伦仙度丝',
        price: 65,
      },
      {
        name: '海伦仙度丝-750ml',
        price: 65,
      },
      {
        name: '海伦仙度丝-1L',
        price: 75,
      },
      {
        name: '滴露-Dettol',
        price: 48,
      },
      {
        name: '澳宝合资-2L',
        price: 35,
      },
      {
        name: '澳宝-1.2L',
        price: 25,
      },
      // {
      //   name: '澳宝-1L',
      //   price: 18,
      // },
      {
        name: '劳工牌洗洁精-5千克',
        price: 35,
      },
      {
        name: '劳工牌洗洁精-1.28千克',
        price: 17,
      },
      {
        name: '东鹏洗洁精-2kg',
        price: 18,
      },
      {
        name: '婕尔洗洁精-700ml',
        price: 8,
      },
      {
        name: '婕尔洗洁精-1L',
        price: 15,
      },
      {
        name: '滴洁洗洁精-套装',
        price: 35,
      },
      {
        name: '斧头牌洗洁精',
        price: 55,
      },
      {
        name: '丹碧芝洗洁精',
        price: 18,
      },
      {
        name: '青岛花生油',
        price: 55,
      },
      {
        name: '刀唛花生油',
        price: 165,
      },
      {
        name: '洁霸洗衣粉-2.5公斤',
        price: 55,
      },
      {
        name: '花世界沐浴露',
        price: 40,
      },
      {
        name: '澳雪沐浴露送洗衣液',
        price: 35,
      },
      {
        name: '澳宝原装-1200ml NET',
        price: 30,
      },
      {
        name: '澳宝原装-1200ml NET-4支装',
        price: 115,
      },
      {
        name: '滴露洗手液-小瓶',
        price: 10,
      },
      {
        name: '上海硫磺皂',
        price: 4,
      },
      {
        name: '厉士皂套装-6颗',
        price: 25,
      },
      {
        name: '厉士皂',
        price: 5,
      },
      {
        name: '舒肤佳皂',
        price: 5,
      },
      {
        name: '扇牌皂',
        price: 11,
      },
      {
        name: '灵凤凰皂',
        price: 10,
      },
      {
        name: '蓝月亮洗衣液',
        price: 40,
      },
      {
        name: '小琳家族洗衣液',
        price: 15,
      },
      {
        name: '洁霸洗衣液',
        price: 55,
      },
      {
        name: '贝亲-700ml',
        price: 48,
      },
      {
        name: '贝亲-200ml',
        price: 20,
      },
      {
        name: '多芬-BABy',
        price: 38,
      },
      {
        name: 'baby沐浴露-500ml',
        price: 48,
      },
      {
        name: '多芬洗发乳-700g',
        price: 48,
      },
      {
        name: '多芬护发-180ml',
        price: 28,
      },
      {
        name: '澳宝洗发水-大焗油',
        price: 20,
      },
      {
        name: '霸王草本',
        price: 50,
      },
      {
        name: '卡露尔小-335ml',
        price: 25,
      },
      {
        name: 'JOA白管',
        price: 38,
      },
      {
        name: '风油精',
        price: 9,
        位置: '向店外第二排',
      },
      {
        name: '海底椰',
        price: 45,
        位置: '向店外第一排',
      },
      {
        name: '念慈菴大',
        price: 55,
        位置: '向店外第一排',
      },
      {
        name: '念慈菴小',
        price: 45,
        位置: '向店外第二排',
      },
      {
        name: '芦荟胶98%',
        price: 35,
        位置: '向店外第一排',
      },
      {
        name: '保婴丹',
        price: 85,
        位置: '向店外第一排',
      },
      {
        name: '平安膏-小',
        price: 7,
        位置: '向店外第二排',
      },
      {
        name: '平安膏-底下黑字',
        price: 9,
        位置: '向店外第二排',
      },
      {
        name: '猴散-三角形',
        price: 110,
        位置: '向店外第二排',
      },
      {
        name: '青草膏',
        price: 20,
        位置: '向店外第二排',
      },
      {
        name: '化妆水棉',
        price: 18,
        位置: '向店外第三排',
      },
      {
        name: '卸妆水',
        price: 95,
        位置: '向店外第三排',
      },
      {
        name: '保胃丹整盒',
        price: 240,
        位置: '向店外第三排',
      },
      {
        name: '七厘散',
        price: 70,
        位置: '向店外第三排',
      },
      {
        name: '八宝散',
        price: 70,
        位置: '向店外第三排',
      },
      {
        name: '马油',
        price: 75,
        位置: '向店外第四排',
      },
      {
        name: '白-钙片软糖',
        price: 160,
        位置: '向店外第四排',
      },
      {
        name: '橙-钙片奶糖',
        price: 175,
        位置: '向店外第四排',
      },
      {
        name: '无比滴',
        price: 35,
        位置: '向店外第四排',
      },
      {
        name: '消石素',
        price: 150,
        位置: '向店外第四排',
      },
      {
        name: '开奶茶',
        price: 85,
        位置: '向店外第五排',
      },
      {
        name: '七星茶',
        price: 80,
        位置: '向店外第五排',
      },
      {
        name: '姑嫂丸一盒',
        price: 350,
        位置: '向店外第五排',
      },
      {
        name: '姑嫂丸一小瓶',
        price: 30,
        位置: '向店外第五排',
      },
      {
        name: '天喜丸',
        price: 27,
        位置: '向店外第五排',
      },
      {
        name: '天喜丸-整盒',
        price: 320,
        位置: '向店外第五排',
      },
      {
        name: '欧莱雅-香',
        price: 148,
        位置: '向店外第五排',
      },
      {
        name: '欧莱雅-高一点',
        price: 115,
        位置: '向店外第五排',
      },
      {
        name: '无比滴-婴儿用',
        price: 50,
        位置: '向店外第四排',
      },
      {
        name: '化妆水-高',
        price: 55,
        位置: '向店外第三排',
      },
      {
        name: '西班牙橄榄油',
        price: 25,
        位置: '向店外第三排',
      },
      {
        name: '叶酸',
        price: 130,
        位置: '向店外第四排',
      },
      {
        name: '养阴丸',
        price: 220,
        位置: '向店外第四排',
      },
      {
        name: '滋阴丸',
        price: 255,
        位置: '向店外第四排',
      },
      {
        name: '面膜',
        price: 45,
        位置: '向店外第四排',
      },
      {
        name: '玉兰油-BB粉',
        price: 145,
        位置: '向店外第五排',
      },
      {
        name: '玉兰油15%防晒',
        price: 135,
        位置: '向店外第五排',
      },
      {
        name: '玉兰油美白防晒-150g',
        price: 85,
        位置: '向店外第五排',
      },
      {
        name: '玉兰油长瓶',
        price: 68,
        位置: '向店外第五排',
      },
      {
        name: '虎贴膏一包三贴',
        price: 20,
        位置: '向店外第六排',
      },
      {
        name: '止血贴',
        price: 40,
        位置: '向店外第六排',
      },
      {
        name: '蜈蚣贴',
        price: 35,
        位置: '向店外第六排',
      },
      {
        name: '澳洲钙片-土色盖子',
        price: 95,
        位置: '向店外第六排',
      },
      {
        name: '维生素C',
        price: 58,
        位置: '向店外第六排',
      },
      {
        name: '撒隆适一包六片',
        price: 40,
        位置: '向店外第七排',
      },
      {
        name: '蜈蚣丸一包70',
        price: 6,
        位置: '座位后第二排',
      },
      {
        name: '黄道益活络油',
        price: 55,
        位置: '座位后第三排',
      },
      {
        name: '均隆驱风油',
        price: 48,
        位置: '座位后第三排',
      },
      {
        name: '胃仙U',
        price: 65,
        位置: '座位后第三排',
      },
      {
        name: '双飞人',
        price: 45,
        位置: '座位后第三排',
      },
      {
        name: '鹰牌德国风油精-大',
        price: 38,
        位置: '座位后第三排',
      },
      {
        name: '鹰牌德国风油精-中',
        price: 25,
        位置: '座位后第三排',
      },
      {
        name: '鹰牌德国风油精-小',
        price: 9,
        位置: '座位后第三排',
      },
      {
        name: '祛疤膏',
        price: 180,
        位置: '',
      },
      {
        name: '鼻水',
        price: 40,
        位置: '',
      },
      {
        name: '破疼油',
        price: 55,
        位置: '',
      },
      {
        name: '古家辉艾油',
        price: 38,
        位置: '',
      },
      {
        name: '新眼敦眼药水',
        price: 48,
        位置: '',
      },
      {
        name: '虎标油-小',
        price: 13,
        位置: '',
      },
      {
        name: '虎标油-大',
        price: 28,
        位置: '',
      },
      {
        name: '日本眼药水-银30',
        price: 40,
        位置: '',
      },
      {
        name: '娥罗纳英-小45',
        price: 80,
        位置: '',
      },
      {
        name: '薄荷膏',
        price: 45,
        位置: '',
      },
      {
        name: '白虎油',
        price: 14,
        位置: '',
      },
      {
        name: '止痛膏-南洋40',
        price: 55,
        位置: '',
      },
      {
        name: '行军散-大',
        price: 25,
        位置: '',
      },
      {
        name: '行军散-小',
        price: 15,
        位置: '',
      },
      {
        name: '蜆壳胃散',
        price: 45,
        位置: '',
      },
      {
        name: '保胃丹',
        price: 40,
        位置: '',
      },
      {
        name: '泄痢丹',
        price: 50,
        位置: '',
      },
      {
        name: '安宫牛黄丸',
        price: 150,
        位置: '',
      },
      {
        name: '强胃散-Stomachin',
        price: 70,
        位置: '',
      },
      {
        name: '鹧鸪菜',
        price: 28,
        位置: '',
      },
      {
        name: '五宝散',
        price: 42,
        位置: '',
      },
      {
        name: '何济公',
        price: 48,
        位置: '',
      },
      {
        name: '猴油',
        price: 22,
        位置: '',
      },
      { name: '水鸭牌苦丸', price: 35, 位置: '' },
      {
        name: '五塔膏',
        price: 25,
        位置: '',
      },
      {
        name: '蛇王标活络油',
        price: 55,
        位置: '',
      },
      {
        name: '金波士千里追风骨刺零',
        price: 65,
        位置: '座位后第四排',
      },
      {
        name: '金波士骨刺零油',
        price: 60,
        位置: '座位后第四排',
      },
      {
        name: '金波士肩周劳损骨刺零',
        price: 65,
        位置: '座位后第四排',
      },
      {
        name: '龙标正经红花油',
        price: 40,
        位置: '座位后第四排',
      },
      {
        name: '撒隆巴斯',
        price: 50,
        位置: '座位后第四排',
      },
      {
        name: '安美露红-有药味',
        price: 40,
        位置: '座位后第四排',
      },
      {
        name: '安美露-蓝没有药味',
        price: 40,
        位置: '座位后第四排',
      },
      {
        name: '依马打四季平安油',
        price: 45,
        位置: '座位后第四排',
      },
      {
        name: '斧标驱风油-小',
        price: 15,
        位置: '座位后第四排',
      },
      {
        name: '虎舒膏',
        price: 55,
        位置: '座位后第四排',
      },
      {
        name: '保心安油-小40',
        price: 55,
        位置: '座位后第四排',
      },
      {
        name: '斧标驱风油-中',
        price: 28,
        位置: '座位后第四排',
      },
      {
        name: '斧标驱风油-大',
        price: 42,
        位置: '座位后第四排',
      },
      {
        name: '藏红宁',
        price: 68,
        位置: '座位后第四排',
      },
      {
        name: '紫花油-小-中30',
        price: 20,
        位置: '座位后第四排',
      },
      {
        name: '紫花油-大',
        price: 48,
        位置: '座位后第四排',
      },
      {
        name: '上标油-大(条)',
        price: 45,
        位置: '座位后第四排',
      },
      {
        name: '上标油-中',
        price: 28,
        位置: '座位后第四排',
      },
      {
        name: '上标油-小',
        price: 18,
        位置: '座位后第四排',
      },
      {
        name: '白花油-大',
        price: 55,
        位置: '座位后第四排',
      },
      {
        name: '拔毒生肌膏',
        price: 20,
        位置: '座位后第四排',
      },
      {
        name: '癣药膏',
        price: 20,
        位置: '座位后第四排',
      },
      {
        name: '星加坡鸿威魔术油',
        price: 48,
        位置: '座位后第四排',
      },
      {
        name: '星加坡金波士魔术油',
        price: 45,
        位置: '座位后第排',
      },
      {
        name: '星洲魔术油',
        price: 45,
        位置: '座位后第排',
      },
      {
        name: '星加坡金波士魔术油-EE',
        price: 45,
        位置: '座位后第排',
      },
      {
        name: '杏林堂双猴魔术油',
        price: 38,
        位置: '座位后第排',
      },
      {
        name: '纸壳-魔术油正泰安',
        price: 38,
        位置: '座位后第排',
      },
      {
        name: '纸壳-魔术油-蝴蝶标',
        price: 30,
        位置: '座位后第排',
      },
      {
        name: '青草油',
        price: 35,
        位置: '座位后第排',
      },
      {
        name: '加料田七青竹草油',
        price: 30,
        位置: '座位后第排',
      },
      {
        name: '完美芦荟胶-40g',
        price: 35,
        位置: '座位后第排',
      },
      {
        name: '六味地黄丸',
        price: 75,
        位置: '座位后第排',
      },
      {
        name: '知柏地黄丸',
        price: 75,
        位置: '座位后第排',
      },
      {
        name: '马百良海狗丸',
        price: 105,
        位置: '座位后第排',
      },
      {
        name: '海狗丸-低',
        price: 55,
        位置: '座位后第排',
      },
      {
        name: '正露丸/喇叭丸-大',
        price: 100,
        位置: '座位后第排',
      },
      {
        name: '正露丸/喇叭丸-小',
        price: 40,
        位置: '座位后第排',
      },
      {
        name: '星加坡-大力猴健胃整肠丸',
        price: 14,
        位置: '座位后第排',
      },
      {
        name: '肚疼健胃整肠丸-大',
        price: 25,
        位置: '座位后第排',
      },
      {
        name: '肚疼健胃整肠丸-小',
        price: 15,
        位置: '座位后第排',
      },
      {
        name: '李万山脾胃丸-黄',
        price: 30,
        位置: '座位后第排',
      },
      {
        name: '李万山脾胃丸-红',
        price: 25,
        位置: '座位后第排',
      },
      {
        name: '双料肠胃丸-整盒140',
        price: 12,
        位置: '座位后第排',
      },
      {
        name: '风莎济救丸-整盒',
        price: 33,
        位置: '座位后第排',
      },
      {
        name: '小林热帖-蓝',
        price: 35,
        位置: '座位后第排',
      },
      {
        name: '小林热帖-红一小包',
        price: 5,
        位置: '座位后第排',
      },
      {
        name: '余仁生白凤丸',
        price: 165,
        位置: '座位后第排',
      },

      {
        name: '善和堂白凤丸',
        price: 200,
        位置: '座位后第排',
      },
    ])
    let keyword = ref('')
    const LL = ref()
    const Data = computed(() => {
      if (keyword.value === '') {
        return LL.value
      } else {
        return LL.value.filter((item) => item.name.includes(keyword.value))
      }
    })
    const le = () => {
      LL.value = data.value
    }
    const SSS = ref(null)
    const handleSearch = () => {
      console.log(keyword.value)
    }
    let show = '加入购物车'
    const showIndex = ref(-1)
    // 加入购物车方法
    const handleShow = (l, a) => {
      let Collection = a.currentTarget

      Collection.innerText = '已加入'
      Collection.className = 'active'
      l.state = 1
      store.commit('Collection', l)
    }
    return {
      data,
      Data,
      keyword,
      show,
      SSS,
      handleSearch,
      showIndex,
      handleShow,
    }
  },
})
</script>
<style lang="less" scoped>
.shop {
  .box {
    width: 360px;
    margin: 15px auto;
    h3 {
      height: 40px;
      line-height: 40px;
      text-align: center;
      background: #cccccc;
    }
    .search {
      display: flex;
      align-items: center;
      padding: 10px 0;
      .el-form-item {
        margin-bottom: 0;
      }
    }
    .search_input {
      width: 100%;
      outline: none;
      border: 0;
      height: 32px;
      line-height: 32px;
      border: 1px solid #cfcfcf;
      box-sizing: border-box;
      text-indent: 1em;
    }
    table {
      border-collapse: collapse;
      line-height: 40px;
      text-align: center;
      cursor: pointer;
      thead {
        tr {
          th {
            text-align: center;
          }
        }
      }
      tr {
        td {
          text-align: center;
          &:nth-child(2) {
            width: 60px;
          }
        }
        .add {
          width: 94px;
        }
        .active {
          background: bisque;
          color: aqua;
        }
      }
    }
  }
}
</style>
